<template>
    <div class="contact">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>联系我们</h1>
            <p>期待与您的沟通交流</p>
        </div>

        <div class="section">
            <el-row :gutter="30">
                <!-- 联系信息 -->
                <el-col :md="12">
                    <el-card class="contact-info">
                        <h2>联系方式</h2>
                        <div class="info-list">
                            <div class="info-item">
                                <el-icon :size="24" color="#409EFF"><Location /></el-icon>
                                <div class="info-content">
                                    <h3>公司地址</h3>
                                    <p>某某市某某区某某街道123号</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <el-icon :size="24" color="#409EFF"><Phone /></el-icon>
                                <div class="info-content">
                                    <h3>联系电话</h3>
                                    <p>400-123-4567</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <el-icon :size="24" color="#409EFF"><Message /></el-icon>
                                <div class="info-content">
                                    <h3>电子邮箱</h3>
                                    <p>contact@company.com</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <el-icon :size="24" color="#409EFF"><Clock /></el-icon>
                                <div class="info-content">
                                    <h3>工作时间</h3>
                                    <p>周一至周五 9:00-18:00</p>
                                </div>
                            </div>
                        </div>

                        <h2 class="follow-title">关注我们</h2>
                        <div class="social-media">
                            <el-button type="primary" circle>
                                <el-icon><Platform /></el-icon>
                            </el-button>
                            <el-button type="success" circle>
                                <el-icon><ChatDotRound /></el-icon>
                            </el-button>
                            <el-button type="warning" circle>
                                <el-icon><Share /></el-icon>
                            </el-button>
                        </div>
                    </el-card>
                </el-col>

                <!-- 留言表单 -->
                <el-col :md="12">
                    <el-card class="message-form">
                        <h2>在线留言</h2>
                        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="form.name" placeholder="请输入您的姓名" />
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="form.phone" placeholder="请输入您的联系电话" />
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email" placeholder="请输入您的电子邮箱" />
                            </el-form-item>
                            <el-form-item label="主题" prop="subject">
                                <el-input v-model="form.subject" placeholder="请输入留言主题" />
                            </el-form-item>
                            <el-form-item label="留言内容" prop="message">
                                <el-input
                                    v-model="form.message"
                                    type="textarea"
                                    :rows="4"
                                    placeholder="请输入您的留言内容"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm(formRef)"
                                    >提交留言</el-button
                                >
                                <el-button @click="resetForm(formRef)">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 公司地图 -->
            <div class="map-section">
                <h2 class="section-title">公司位置</h2>
                <div class="map-container">
                    <!-- 这里可以集成地图组件，如高德地图、百度地图等 -->
                    <div class="map-placeholder">
                        <el-icon :size="40"><Location /></el-icon>
                        <p>地图加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {
    Location,
    Phone,
    Message,
    Clock,
    Platform,
    ChatDotRound,
    Share
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const formRef = ref<FormInstance>();

const form = ref({
    name: '',
    phone: '',
    email: '',
    subject: '',
    message: ''
});

const rules = ref<FormRules>({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    subject: [
        { required: true, message: '请输入留言主题', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    message: [
        { required: true, message: '请输入留言内容', trigger: 'blur' },
        { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
    ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            ElMessage.success('留言提交成功！');
            formEl.resetFields();
        } else {
            console.log('error submit!', fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style scoped>
.contact {
    min-height: 100vh;
}

.page-header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #409eff 0%, #2c3e50 100%);
    color: white;
    margin-bottom: 40px;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.section {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info,
.message-form {
    height: 100%;
}

.contact-info h2,
.message-form h2 {
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 1.5rem;
}

.info-list {
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-item .el-icon {
    margin-right: 15px;
    margin-top: 5px;
}

.info-content h3 {
    margin: 0 0 8px;
    color: #2c3e50;
    font-size: 1.1rem;
}

.info-content p {
    margin: 0;
    color: #666;
}

.follow-title {
    margin: 30px 0 20px;
    color: #2c3e50;
    font-size: 1.5rem;
}

.social-media {
    display: flex;
    gap: 15px;
}

.message-form {
    padding: 20px;
}

.map-section {
    margin-top: 60px;
}

.section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    color: #2c3e50;
}

.map-container {
    height: 400px;
    background-color: #f5f7fa;
    border-radius: 8px;
    overflow: hidden;
}

.map-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #909399;
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }

    .contact-info,
    .message-form {
        margin-bottom: 30px;
    }

    .map-container {
        height: 300px;
    }
}
</style>
